import {
  API_GroupList,
  API_VideoList
} from '../../api/api_video'
// pages/video/video.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    groupList: [], //导航标签的数据
    navId: '', //导航的标识
    videoList: [], // 视频列表
    videoId: '', // 视频id标识,
    istriggered: false, // 控制下拉刷新的变量
  },
  // 获取导航栏列表
  async getGroupList() {
    // 首次获取视频数据也许提示加载中
    wx.showLoading({
      title: '加载中'
    })
    let groupListData = await API_GroupList();
    if (groupListData) {
      this.setData({
        groupList: groupListData.data.slice(0, 14),
        navId: groupListData.data[0].id
      })
    }
    this.getVideoList(this.data.navId)
  },
  // 绑定导航栏的点击事件
  handleNav(event) {
    // event.currentTarget.id >>> 0转换为number 也可以直接*1
    this.setData({
      navId: event.currentTarget.id >>> 0,
      videoList: []
    })
    // 点击后加载数据的提示
    wx.showLoading({
      title: '加载中'
    })
    // 然后获取数据
    this.getVideoList(this.data.navId)
  },
  // 获取视频数据
  async getVideoList(navId) {
    let videoListData = await API_VideoList({
      id: navId
    })
    if (videoListData.code === 301) {
      wx.showToast({
        title: '请先登录',
        icon: 'error'
      })
      setTimeout(() => {
        wx.reLaunch({
          url: '/pages/login/login'
        })
      }, 1000)

    }
    // 获取完数据后关闭加载提示
    wx.hideLoading();
    let index = 0;
    if (videoListData.datas) {
      let videoList = videoListData.datas.map(item => {
        item.id = index++;
        return item;
      })
      this.setData({
        videoList,
        istriggered: false, //关闭下拉刷新
      })
    }
  },
  // 点击视频开始/继续开始的时间
  /**
   * 
   * 问题： 多个视频同时播放的问题
   * 
   * 解决办法：
   * 1.在点击事件时播放这个视频并关闭上个视频的播放
   * 但是会出现另一个bug，如果上一个视频是自己，则再点击就无法播放了，因为在这里主动将他关闭了
   * 
   * 措施：
   * 1.为每个video绑定一个id，然后点击时获取该id
   * 2.如果本次点击的视频id和上次播放的id是同一个id且上次播放的视频存在则停止该视频的播放
   * 3.保持当前的vid和保存当前视频的createVideoContext
   * 
   * 
   * 这里使用的是单列模式
   * 即当需要接收多个对象时，只在当前实例下创建一个对象，一直更新这个对象，这可以节省内存，
   * 也可以获取到上一个对象
   */
  isPlay(event) {
    let vid = event.currentTarget.id;
    /**
     * 通过使用image替换video时不需要再去找上一个视频和判断是否为当前视频
     * 因为此时只有当前点击的为video，其他的为image
     vid !== this.vid && this.videoContext && this.videoContext.stop();
     this.vid = vid;
     */
    this.setData({
      videoId: vid
    })
    this.videoContext = wx.createVideoContext(vid)
    this.videoContext.play();
  },
  // 下拉刷新
  refreshVideo() {
    console.log("下拉刷新");
    // 点击后加载数据的提示
    wx.showLoading({
      title: '加载中'
    })
    this.getVideoList(this.data.navId);
  },
  // 上拉加载
  handleToLoad() {
    console.log("到底啦");
  },
  // 去搜索页面
  toSearch() {
    wx.navigateTo({
      url: '/pages/search/search'
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getGroupList();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function ({
    from
  }) {
    if (from === 'menu') {
      return {
        title: '转发给朋友',
        path: 'pages/video/video',
        imageUrl: "/static/images/nvsheng.jpg"
      }
    } else {
      return {
        title: '转发给朋友',
        path: 'pages/video/video',
        imageUrl: "/static/images/nvsheng.jpg"
      }
    }
  }
})